<style lang="sass">
.index
  background-color: #eeecec
  min-height: 100vh
  box-sizing: border-box
  display: flex
  flex-direction: column
  background-image: linear-gradient(to bottom, #eeecec, #afa093)
  .top
    padding: 10px 20px 0 20px
.searchBox
  border-radius: 8px
  border: 1px solid #99714b
  display: flex
  align-items: center
  margin-bottom: 15px
  .searchInput
    flex: 1
    padding: 0 10px
  .searchBtn
    border-radius: 0px 8px 8px 0
    background-color: #99714b
    height: 70px
    line-height: 70px
    color: #fff
    width: 160px
    padding: 0
    margin: 0
.recommendAuthor
  margin-bottom: 20px
  .authorBox
    display: flex
    flex-direction: column
    align-items: center
    margin-right: 40px
  .nickName
    color: #99714b
    font-size: 30px
    margin-top: 10px
  .authorList
    display: flex
  .avatarImg
    width: 80px
    height: 80px
    border: 1px solid #99714b
    border-radius: 50%
.recommendSticker
  border-radius: 20px 20px 0 0
  background-color: #fff
  flex: 1
  .title
    padding: 20px 20px 0 20px
    font-size: 36px
    color: #99714b
</style>
<template>
  <view class="index">
    <view class="top">
      <view class="searchBox">
        <input type="text" class="searchInput" v-model="code" placeholder="输入创作者代码">
        <Button @tap="search" class="searchBtn">搜索</Button>
      </view>
      <view class="recommendAuthor">
        <view class="authorList">
          <view v-for="item in homeData.authors" class="authorBox" :key="item.id" @tap="goAuthor(item.userId)">
            <Image class="avatarImg" :src="item.avatar" />
            <Text class="nickName">{{ item.code }}</Text>
          </view>
        </view>
      </view>
    </view>
    <view class="recommendSticker">
      <view class="title">热门图片</view>
      <view class="stickerGroupBox">
        <groupItem v-for="item in homeData.groups" :item="item"></groupItem>
      </view>
    </view>
  </view>
</template>

<script setup>
import Taro from "@tarojs/taro";
import {reactive, ref} from "vue";
import { View, Text, Button, Image } from '@tarojs/components'
import { get } from "../../util/request";
import groupItem from '../../components/groupItem/index.vue'

const code = ref('')
Taro.showShareMenu({
  withShareTicket: true
})
var homeData = reactive({
  authors: [],
  groups: []
})
const search = async () => {
  if(!code.value) return
  Taro.showLoading({
    title: '加载中...',
  })
  const author = await get('home/author', { code: code.value })
  Taro.hideLoading()
  if(author){
    Taro.navigateTo({
      url: `/pages/author/detail/index?id=${author.userId}`
    })
  }else {
    Taro.showToast({
      title: `未找到创作者${code.value}`,
      icon: 'none'
    })
  }
}

const getHomeData = async () => {
  const result = await get('home/data')
  Object.assign(homeData, result)
}



function goAuthor(id) {
  Taro.navigateTo({
    url: `/pages/author/detail/index?id=${id}`
  })
}

getHomeData()

</script>
